<template>
  <div class="box9">
    <van-search placeholder="请输入搜索关键词" shape="round"  @focus="$router.push('/sou')"/>
    <section>
      <van-sidebar v-model="activeKey" @change='dj'>
        <van-sidebar-item title="所有分类" />
        <van-sidebar-item
          :title="item.name"
          v-for="(item, key) in left"
          :key="key"
        />
      </van-sidebar>
      <div class="right">
        <dl v-for="(item,key) in djlist"  :key='key'>
          <dt>
            <img :src="item.icon" alt="">
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0,
      left: [],
      //所有数据
      all:[],
      //点击数据
      djlist:[]
    };
  },
  mounted() {
    this.getleft();
  },
  methods: {
    //左侧数据
    getleft() {
      this.$http.post("/shop/goods/category/all").then((res) => {
        console.log(res.data.data);
        this.all=res.data.data
        console.log(this.all)
        var list = res.data.data.filter((item) => {
          return item.pid == 0;
        });
        console.log(list);
        this.left = list;
        this.dj(0)
      });
    },
    //索引
    dj(index){
      console.log(index)
      var pid=this.left[index].id
      var list=this.all.filter(item=>{
        return pid==item.pid
      })
      this.djlist=list
      if(index==0){
        this.djlist=this.all
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.box9 {
  width: 100%;
  height:100%;
  section {
    width: 100%;
    display: flex;
    .van-sidebar{
      width: 80px;
    }
    .right{
      height:100%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      overflow: auto;
      dl{
        width: 49%;
        dt{
          width: 100%;
          img{
            width: 100%;
          }
        }
      }
    }
  }
}
</style>